<template>
  <div class="page flex-col">
    <div class="body flex-col">
      <div class="box_7 flex-col"></div>
      <div class="box_8 flex-row">
        <div class="grid_1 flex-row">
          <div class="tag_5 flex-col">
            <span class="text_28">全程高能</span>
          </div>
          <div class="tag_6 flex-col">
            <span class="text_29">有待推敲</span>
          </div>
          <div class="tag_7 flex-col">
            <span class="text_30">值得一玩</span>
          </div>
          <div class="tag_8 flex-col">
            <span class="text_31">不太推荐</span>
          </div>
          <div class="tag_9 flex-col">
            <span class="text_32">立意深刻</span>
          </div>
          <div class="tag_10 flex-col">
            <span class="text_33">平平无齐</span>
          </div>
        </div>
        <img
          class="image_8"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psk730v59yz9ljlclja945feofibkho04m33b3336c-2260-42f6-b172-91b69d9bf6e7"
        />
        <img
          class="label_5"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps3kdt1jvpnc51cvxcq4tzwx4jb1jqfe4nd27399838-919f-4a1f-968d-9343345e2447"
        />
        <div class="group_6 flex-col">
          <span class="text_34">78人评分</span> <span class="text_35">9.6</span>
          <div class="image-wrapper_3 flex-row">
            <img
              class="label_6"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pswbf005uat1p46llnwpnrk4tf7catqnax169070ce-5b4d-4712-8550-c67903dba193"
            />
            <img
              class="label_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pst3e6eqq2vvizawgx49e8rkrggimjcx9c5844d8-6377-47da-8f45-0175a453094c"
            />
            <img
              class="label_8"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskzf6t4x72cjz5gm7omsqzogqfu0wkw30w00937d56-111a-4f53-a625-c8e9e6d5f224"
            />
          </div>
        </div>
        <img
          class="label_9"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pstm9rc7ababwd0z6455utclx224h4mscsfda70451-7cfc-4477-8580-3902ae0fa90f"
        />
      </div>
      <div class="tag_11 flex-col">
        <span class="text_36">已隐藏剧透评论，玩过此本后展示</span>
      </div>
      <div class="box_9 flex-row justify-between">
        <div class="single-avatar_1 flex-col"></div>
        <div class="text-wrapper_5 flex-col justify-between">
          <span class="text_37">潇潇暮雨</span>
          <span class="text_38">04-12</span>
        </div>
      </div>
      <div class="box_10 flex-row">
        <span class="text_39">评过</span>
        <img
          class="label_10"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps13lqjaq8g0rt4aivgvyzlj6kwh2drl0v96556c2a4-1b76-48f6-8835-612f5c2c9606"
        />
        <img
          class="label_11"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psckoz7prn02ntxl0htqj6zmtknsipzkiim60cd4ae8-2ed8-47c3-b2b0-d5581abb6c40"
        />
        <img
          class="label_12"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvifjv7yfz2pafd2r5jt14g7sk481xyefo5e99cb44-d282-4314-970b-ea3ac093f036"
        />
        <img
          class="label_13"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps0lidtddw0n9d3huuhk8hsooqe2k9ynqyip5fef6a39-0886-4ce9-8dfd-9036ff20cacf"
        />
        <img
          class="label_14"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psk0slwx5x19vbqlto7wg1p4eprv19ju49c06b7013-f70f-4e62-a3aa-9c6c26283312"
        />
        <div class="tag_12 flex-col"><span class="text_40">全程高能</span></div>
        <div class="tag_13 flex-col"><span class="text_41">立意深刻</span></div>
      </div>
      <span class="text_42"
        >末日生存的环境下，偌大的地球上只剩下几个人相依为命，从最开始的无知戒备，到相知相识，再到其乐融融，我们如同温暖的大家庭一样欣欣向荣。</span
      >
      <img
        class="image_9"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psc5doplaub5hd0slyuy3kk4iiaybm6etp9329b3d1-956a-432d-a581-fc1bd2a367da"
      />
      <div class="box_11 flex-row justify-between">
        <div class="single-avatar_2 flex-col"></div>
        <div class="text-wrapper_6 flex-col justify-between">
          <span class="text_43">实在流浪</span>
          <span class="text_44">03-28</span>
        </div>
      </div>
      <div class="box_12 flex-row">
        <span class="text_45">评过</span>
        <img
          class="label_15"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psymyl4hsxzvcih0c8x4e5so76d8infolr3a4f26eeb-4f61-4e13-b386-1f1c8758e998"
        />
        <img
          class="label_16"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdqsy8gspt6iyj511burqsscbxx5qx4kc330b5e5-1182-4764-ab4c-a44c282904f6"
        />
        <img
          class="label_17"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psy8e05xnuaxfs8v3c4imjyg4f1mwrf58gr77f91182-2f0e-4a75-936b-7864a0e9b547"
        />
        <img
          class="label_18"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfsoocyrt7qkgvf0s82j5s34n8g7rk6mibc388d95-6100-4d02-b749-c5c26fdd9511"
        />
        <img
          class="label_19"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psljv8c02ru5i5ry99kjascwbdqcg865d7c15a987-096d-4b73-b653-bee594ec0c44"
        />
        <div class="tag_14 flex-col"><span class="text_46">平平无齐</span></div>
      </div>
      <span class="paragraph_2"
        >正义的本质就是最好与最坏的折衷：所谓最好，就是干了坏事而不受罚；所谓最坏，就是受了罪而没法报复。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;——柏拉图《理想国》</span
      >
      <img
        class="image_10"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psuaixl4gk2ktgitwtn0tbswlisjot3rje80b8fc96-dc92-4d93-8442-41dfd7ca9a41"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
    };
  },
  methods: {
    onClick_1() {
      alert(1);
    },
    onClick_2() {
      alert(1);
    },
    onClick_3() {
      alert(1);
    },
  },
};
</script>
<style scoped>
html {
  font-size: 200px;
}

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 3.75rem;
  height: 4.945rem;
  overflow: hidden;
}

.header {
  width: 3.75rem;
  height: 0.44rem;
}
.body {
  width: 3.75rem;
  height: 5.445rem;
  margin-bottom: 0.06rem;
  overflow-y: auto;
  margin-top: 0.45rem;
}
.box_8 {
  background-color: rgba(251, 248, 255, 1);
  border-radius: 20px;
  width: 3.35rem;
  height: 1.12rem;
  margin: 0.1rem 0 0 0.2rem;
}

.grid_1 {
  width: 1.97rem;
  height: 0.62rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0 0.12rem;
}

.tag_5 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  width: 0.59rem;
  margin: 0 0.1rem 0.1rem 0;
}

.text_28 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.tag_6 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  width: 0.59rem;
  margin: 0 0.1rem 0.1rem 0;
}

.text_29 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.tag_7 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  margin-bottom: 0.1rem;
  width: 0.59rem;
}

.text_30 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.tag_8 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  width: 0.59rem;
  margin: 0 0.1rem 0.1rem 0;
}

.text_31 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.tag_9 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  width: 0.59rem;
  margin: 0 0.1rem 0.1rem 0;
}

.text_32 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.tag_10 {
  border-radius: 23px;
  height: 0.27rem;
  border: 2px solid rgba(187, 187, 187, 1);
  margin-bottom: 0.1rem;
  width: 0.59rem;
}

.text_33 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.23rem;
}

.image_8 {
  width: 0.01rem;
  height: 0.295rem;
  margin: 0.415rem 0 0 0.12rem;
}

.label_5 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.84rem 0 0 0.15rem;
}

.group_6 {
  width: 0.505rem;
  height: 0.695rem;
  margin: 0.225rem 0 0 0.025rem;
}

.text_34 {
  width: 0.48rem;
  height: 0.105rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.11rem;
  margin-left: 0.02rem;
}

.text_35 {
  width: 0.4rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.3rem;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 0.3rem;
  margin: 0.115rem 0 0 0.03rem;
}

.image-wrapper_3 {
  width: 0.505rem;
  height: 0.15rem;
  margin-top: 0.1rem;
}

.label_6 {
  width: 0.15rem;
  height: 0.15rem;
}

.label_7 {
  width: 0.15rem;
  height: 0.15rem;
  margin-left: 0.03rem;
}

.label_8 {
  width: 0.15rem;
  height: 0.15rem;
  margin-left: 0.025rem;
}

.label_9 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.84rem 0.145rem 0 0.025rem;
}

.tag_11 {
  background-color: rgba(238, 238, 238, 1);
  border-radius: 23px;
  height: 0.23rem;
  width: 2.5rem;
  margin: 0.1rem 0 0 0.62rem;
}

.text_36 {
  width: 1.635rem;
  height: 0.115rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.115rem;
  margin: 0.055rem 0 0 0.43rem;
}

.box_9 {
  width: 1.07rem;
  height: 0.4rem;
  margin: 0.1rem 0 0 0.2rem;
}

.single-avatar_1 {
  background-color: rgba(187, 187, 187, 1);
  border-radius: 50%;
  width: 0.4rem;
  height: 0.4rem;
}

.text-wrapper_5 {
  width: 0.55rem;
  height: 0.315rem;
}

.text_37 {
  width: 0.55rem;
  height: 0.13rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
}

.text_38 {
  width: 0.32rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin-top: 0.09rem;
}

.box_10 {
  width: 2.62rem;
  height: 0.23rem;
  margin: 0.1rem 0 0 0.2rem;
}

.text_39 {
  width: 0.27rem;
  height: 0.13rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
  margin-top: 0.05rem;
}

.label_10 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.11rem;
}

.label_11 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.label_12 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.03rem;
}

.label_13 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.label_14 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.tag_12 {
  background-color: rgba(238, 238, 238, 1);
  border-radius: 23px;
  height: 0.24rem;
  margin-left: 0.145rem;
  width: 0.6rem;
}

.text_40 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.24rem;
}

.tag_13 {
  background-color: rgba(238, 238, 238, 1);
  border-radius: 23px;
  height: 0.24rem;
  margin-left: 0.14rem;
  width: 0.6rem;
}

.text_41 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.24rem;
}

.text_42 {
  width: 3.355rem;
  height: 0.475rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.12rem;
  text-align: justifyLeft;
  line-height: 0.18rem;
  margin: 0.1rem 0 0 0.195rem;
}

.image_9 {
  width: 3.35rem;
  height: 0.01rem;
  margin: 0.095rem 0 0 0.2rem;
}

.box_11 {
  width: 1.065rem;
  height: 0.405rem;
  margin: 0.095rem 0 0 0.2rem;
}

.single-avatar_2 {
  background-color: rgba(187, 187, 187, 1);
  border-radius: 50%;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.005rem;
}

.text-wrapper_6 {
  width: 0.55rem;
  height: 0.32rem;
}

.text_43 {
  width: 0.55rem;
  height: 0.135rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
}

.text_44 {
  width: 0.355rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.09rem 0 0 0.005rem;
}

.box_12 {
  width: 1.93rem;
  height: 0.23rem;
  margin: 0.1rem 0 0 0.2rem;
}

.text_45 {
  width: 0.27rem;
  height: 0.13rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
  margin-top: 0.05rem;
}

.label_15 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.11rem;
}

.label_16 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.label_17 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.03rem;
}

.label_18 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.label_19 {
  width: 0.15rem;
  height: 0.15rem;
  margin: 0.045rem 0 0 0.025rem;
}

.tag_14 {
  background-color: rgba(238, 238, 238, 1);
  border-radius: 23px;
  height: 0.24rem;
  margin-left: 0.145rem;
  width: 0.6rem;
}

.text_46 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.11rem;
  font-family: PingFangSC-Light;
  text-align: center;
  white-space: nowrap;
  line-height: 0.24rem;
}

.paragraph_2 {
  width: 3.35rem;
  height: 0.475rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.12rem;
  text-align: justifyLeft;
  line-height: 0.18rem;
  margin: 0.1rem 0 0 0.2rem;
}

.image_10 {
  width: 3.35rem;
  height: 0.01rem;
  margin: 0.095rem 0 0 0.2rem;
}

.button_3 {
  background-color: rgba(181, 108, 255, 1);
  border-radius: 0.3rem;
  height: 0.3rem;
  width: 3.35rem;
  margin: 0.25rem 0 0 0.2rem;
}

.text_47 {
  width: 0.895rem;
  height: 0.125rem;
  color: rgba(255, 255, 255, 1);
  font-size: 0.13rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.13rem;
  margin: 0.09rem 0 0 1.23rem;
}

.box_13 {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px 6px 5px 5px;
  width: 1.35rem;
  height: 0.06rem;
  margin: 0.09rem 0 0 1.2rem;
}
</style>
